<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>05-userList</title>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/material-teal/easyui.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/color.css">
  <style>
    label[class="error"]{
      color:#f00;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <br>
    <h3>用户记录</h3>
    <hr>
    <!-- User记录 -->
    <div class="">
      <table id="dg" class="easyui-datagrid" title="" style="width:100%;height:480px;" 
        data-options="rownumbers:true,pagination:true,singleSelect:true,
        url:'${pageContext.request.contextPath }/userList?method=getUserListForEasyUI',
        method:'post',fitColumns:true,striped:true,toolbar:'#toolbar'">
        <thead>
          <tr>
            <th scope="col" data-options="field:'username',width:100">用户名</th>
            <th scope="col" data-options="field:'realname',width:100">真实姓名</th>
            <th scope="col" data-options="field:'cellphone',width:100">手机号码</th>
            <th scope="col" data-options="field:'email',width:100">邮箱</th>
          </tr>         
        </thead>
      </table>
    </div>
    <!-- 添加,编辑,移除按钮 -->
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton addUserCls" data-options="iconCls:'icon-add',plain:true" onclick="addUser()">添加用户</a>
        <a href="javascript:void(0)" class="easyui-linkbutton detailUserCls" data-options="iconCls:'icon-edit',plain:true" onclick="detailUser()">编辑用户</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="destroyUser()">移除用户</a>
    </div>
  </div><!-- container-fluid -->
  
  <!-- 添加用户信息Modal : addUserModal -->
  <div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">详细信息</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form action="#" method="post" id="addUserForm">
            <div class="form-group row">
              <label for="forAddUsername" class="col-sm-3 col-form-label text-center">用户名</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forAddUsername" name="forAddUsername">
              </div>
            </div>
            <div class="form-group row">
              <label for="forAddRealname" class="col-sm-3 col-form-label text-center">真实姓名</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forAddRealname" name="forAddRealname">
              </div>
            </div>
            <div class="form-group row">
              <label for="forAddPassword" class="col-sm-3 col-form-label text-center">密码</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forAddPassword" name="forAddPassword" value="123456" readonly>
              </div>
            </div>
            <div class="form-group row">
              <label for="forAddCellphone" class="col-sm-3 col-form-label text-center">联系方式</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forAddCellphone" name="forAddCellphone">
              </div>
            </div>
            <div class="form-group row">
              <label for="forAddEmail" class="col-sm-3 col-form-label text-center">邮箱</label>
              <div class="col-sm-9">
                <input type="email" class="form-control" id="forAddEmail" name="forAddEmail">
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3"></label>
              <div class="col-sm-9">
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="forAddMan" name="addGender" class="custom-control-input" value="1" checked>
                  <label class="custom-control-label" for="forAddMan">男</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="forAddWoman" name="addGender" class="custom-control-input" value="0">
                  <label class="custom-control-label" for="forAddWoman">女</label>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <label for="forAddResume" class="col-sm-3 col-form-label text-center">简介</label>
              <div class="col-sm-9">
                <textarea id="forAddResume" name="forAddResume" class="form-control" rows="3"></textarea>
              </div>
            </div>
          </form>
        </div><!-- modal-body -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary addNewUserBtn">添加</button>
        </div><!-- modal-footer -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal fade -->

  <!-- 用户详细信息Modal : showUserModal -->
  <div class="modal fade" id="showUserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">详细信息</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form action="#" method="post" id="showUserForm">
            <div class="form-group row">
              <label for="forShowUsername" class="col-sm-3 col-form-label text-center">用户名</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forShowUsername" readonly>
              </div>
            </div>
            <div class="form-group row">
              <label for="forShowRealname" class="col-sm-3 col-form-label text-center">真实姓名</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forShowRealname">
              </div>
            </div>
            <div class="form-group row">
              <label for="forShowPassword" class="col-sm-3 col-form-label text-center">密码</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forShowPassword">
              </div>
            </div>
            <div class="form-group row">
              <label for="forShowCellphone" class="col-sm-3 col-form-label text-center">联系方式</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="forShowCellphone" name="forShowCellphone">
              </div>
            </div>
            <div class="form-group row">
              <label for="forShowEmail" class="col-sm-3 col-form-label text-center">邮箱</label>
              <div class="col-sm-9">
                <input type="email" class="form-control" id="forShowEmail">
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3"></label>
              <div class="col-sm-9">
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="forShowMan" name="showGender" class="custom-control-input forShowMan" value="1">
                  <label class="custom-control-label" for="forShowMan">男</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="forShowWoman" name="showGender" class="custom-control-input forShowWoman" value="0">
                  <label class="custom-control-label" for="forShowWoman">女</label>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <label for="forShowResume" class="col-sm-3 col-form-label text-center">简介</label>
              <div class="col-sm-9">
                <textarea id="forShowResume" class="form-control" rows="3"></textarea>
              </div>
            </div>
          </form>
        </div><!-- modal-body -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary submitEditUserBtn">确定</button>
        </div><!-- modal-footer -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal fade -->

  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap-4.2.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.validate.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/js/messages_zh.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/easyui/locale/easyui-lang-zh_CN.js"></script>
  <script type="text/javascript">
    function addUser(){
        $(".addUserCls").attr('data-toggle','modal');
        $(".addUserCls").attr('data-target','#addUserModal');
        $(".addNewUserBtn").removeAttr('data-dismiss','modal');
        $("#forAddUsername").val("");
        $("#forAddRealname").val("");
        $("#forAddCellphone").val("");
        $("#forAddEmail").val("");
        $("#forAddResume").val("");
        $("label.error").remove();
    }
    function detailUser(){
    	var row = $("#dg").datagrid("getSelected");
    	if(row){
    		$("label.error").remove();
        $(".detailUserCls").attr('data-toggle','modal');
        $(".detailUserCls").attr('data-target','#showUserModal');
        $(".submitEditUserBtn").removeAttr('data-dismiss','modal');
        $("#forShowUsername").val(row.username);
        $("#forShowPassword").val(row.password);
        $("#forShowRealname").val(row.realname);
        $("#forShowCellphone").val(row.cellphone);
        $("#forShowEmail").val(row.email);
        $("#forShowResume").val(row.resume);
        $("#forShowGender").val(row.gender);
        if(row.genderNum==1){
            $(".forShowMan").prop("checked","checked");
          }else if(row.genderNum==0){
            $(".forShowWoman").prop("checked","checked");
          }
    	}
    }
    function destroyUser(){
    	  var row = $('#dg').datagrid('getSelected'); 
        if(row){
            $.messager.confirm('Confirm','确定删除此用户？',function(r){
              if(r){
                $.post(
                  "/LostAndFound/userList?method=handleDeleteUserForEasyUI",
                  {"uid":row.uid},
                  function(data){
                    if(data.success){
                      $("#dg").datagrid('reload');
                    }else{
                      $.messager.show({
                        title: 'Error',
                        msg:'删除错误！'
                      });
                    }
                  },
                  "json"
                );
              }
            })
       }
    }
    // 确定提交
    function saveNewUser(){
        var username = $("#forAddUsername").val();
        var password = $("#forAddPassword").val();
        var realname = $("#forAddRealname").val();
        var cellphone= $("#forAddCellphone").val();
        var email = $("#forAddEmail").val();
        var gender = $("input:radio[name='addGender']:checked").val();
        var resume = $("#forAddResume").val();
        $(".addNewUserBtn").attr('data-dismiss','modal');
        $.post(
          "/LostAndFound/userList?method=handleAddUserEasyUI",
          {   
        	  "username":username,
            "password":password,
            "realname":realname,
            "cellphone":cellphone,
            "email":email,
            "gender":gender,
            "resume":resume
          },
          function(data){
              if (!data.success) {
                  $.messager.show({
                    title : 'Error',
                    msg : "添加错误！"
                  });
                } else {
                    $('#dg').datagrid('reload'); // reload the info data
                }
          },
          "json"
        );
    }
    // 确定编辑
    function saveEditUser(){
    	var row = $('#dg').datagrid('getSelected');
    	$(".submitEditUserBtn").attr('data-dismiss','modal');
      var password = $("#forShowPassword").val();
      var realname = $("#forShowRealname").val();
      var cellphone= $("#forShowCellphone").val();
      var email = $("#forShowEmail").val();
      var gender = $("input:radio[name='showGender']:checked").val();
      var resume = $("#forShowResume").val();
    	$.post(
    	  "/LostAndFound/userList?method=handleEditUserEasyUI",
    	  {
    		  "uid":row.uid,
    		  "password":password,
    		  "realname":realname,
          "cellphone":cellphone,
          "email":email,
          "gender":gender,
          "resume":resume
    	  },
    	  function(data){
    		  if (!data.success) {
    			  $.messager.show({
    				  title : 'Error',
    				  msg : "修改错误！"
    			  });
          } else {
            $('#dg').datagrid('reload'); // reload the info data
          }
    	  },
    	  "json"
    	);
    }
  </script>
  <script type="text/javascript">
    $(function(){
    	jQuery.validator.setDefaults({
    		success:"valid"
    	});
    	// 添加用户，表单校验，remote验证用户名是否可用
    	$("#addUserForm").validate({
    		rules:{
    			forAddUsername:{
    				required:true,
    				minlength:2,
    				remote:{
    					url:"/LostAndFound/userList?method=checkAddUsername",
    					type:"post",
    					dataType:"json",
    					data:{
    						username:function(){
    							return $("#forAddUsername").val();
    						}
    					}
    				}
    			},
    			forAddCellphone:{
    				required:true,
    			}
    		},
    		messages:{
    			forAddUsername:{
    				remote:"用户名不可用"
    			}
    		}
    	});
    	$("#showUserForm").validate({
    		rules:{
    			forShowCellphone:{
    				required:true
    			}
    		}
    	});
    	// 确定添加用户
    	$(".addNewUserBtn").on("click",function(){
    		if($("#addUserForm").valid()){
    			saveNewUser();
    		}
    	});
    	$(".submitEditUserBtn").on("click",function(){
        if($("#showUserForm").valid()){
          saveEditUser();
        }
      });
    });
  </script>
</body>
</html>